<template>
  <div id="progress">
    <div class="pie" ref="pie"></div>
    <div class="wrap">
      <div class="title">{{ props.text }} : {{ props.total }}</div>
      <div class="strip">
        <div class="strip-item" :class="[item.text == props.hover.text ? 'active' : '']"
          :style="{ background: colorList[idx], width: (item.number / props.total) * 100 + '%' }"
          v-for="(item, idx) in props.list" :key="item.text">

        </div>
      </div>
      <div class="detail">
        <div class="detail-item" v-for="(item, idx) in props.list" :key="item.text">
          <span class="color-#8696AB">{{ item.text }}</span>:
          <span :style="{ color: idx > 2 ? colorList[idx + 1] : colorList[idx] }">{{ item.number }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { computed, ref, defineProps, onMounted, watch } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { getProgressOptions } from "./data"
const props = defineProps(['percent', 'list', 'total', 'text', 'hover']);


const pie = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(pie as unknown as HTMLDivElement);
const color = computed(() => {
  const { percent } = props;
  if (percent < 20) {
    return "#ff4242"
  } else if (percent >= 20 && percent < 40) {
    return "#F0A03D"
  } else if (percent >= 40 && percent < 80) {
    return "#209EE4"
  } else {
    return "#16C716"
  }
})

const colorList = ref<any>([
  "#0BBC0B", '#629DF4', "#967FC7", "#D5E1FB", '#8696AB'
])
onMounted(() => {
  initPie(props.percent)
})
watch(() => props.percent, (val) => {
  initPie(val)
})

const initPie = (val) => {
  var getvalue = [val];
  const option = getProgressOptions(getvalue,color.value)
  setOptions(option);
}


</script>

<style lang="less" scoped>
#progress {
  position: relative;
  width: 100%;
  display: flex;
  height: 60px;

  .pie {
    width: 80px;
    height: 80px;
  }

  .wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 60px;
    gap: 4px;

    .title {}

    .strip {
      width: 100%;
      height: 14px;
      border: 1px solid;
      border-image: linear-gradient(90deg, rgba(168, 193, 249, 1), rgba(168, 193, 249, 0.4)) 1 1;
      display: flex;
      align-items: center;
      padding: 0 2px;
      box-sizing: border-box;
      justify-content: center;
      gap: 2px;

      .strip-item {
        transition: all ease .2s;
        height: 8px;
        margin: 3px 0;
      }
    }

    .detail {
      display: flex;

      .detail-item {
        flex: 1;
        font-size: 14px;
      }
    }
  }
}

.active {
  height: 12px !important;
}
</style>